<script setup lang='ts'>
interface Props {
  amount: string | number
  currencyType?: EnumCurrencyKey
  currencyCode?: CurrencyCode
  showName?: boolean
  /**
   * 是否显示颜色
   *
   * 大于等于0 显示红色
   *
   * 小于0 显示绿色
   */
  showColor?: boolean
  /** 是否需要显示popper */
  reverse?: boolean
  showPrefix?: boolean
  showIcon?: boolean
  /** 弹出类名 */
  popperClazz?: string
  noFormat?: boolean
}
defineOptions({
  name: 'AppAmount',
})
const props = withDefaults(defineProps<Props>(), {
  showIcon: true,
})

const _currencyType = computed<EnumCurrencyKey | undefined>(() => props.currencyType ? props.currencyType : codeToType(props.currencyCode))
const _prefix = computed(() => _currencyType.value ? currencyConfig[_currencyType.value]?.prefix : '')
const isOfficial = computed(() => _currencyType.value && ['CNY', 'BRL', 'INR', 'VND', 'KVND', 'THB', 'EUR', 'JPY'].includes(_currencyType.value))

function codeToType(code?: CurrencyCode): EnumCurrencyKey | undefined {
  if (code)
    return Object.entries(currencyConfig).map(([k, v]) => ({ type: k as EnumCurrencyKey, ...v })).filter(item => item.cur === code)[0]?.type
}

/** 获取字符串开头非数字部分 */
function extractNonNumericStart(str: string) {
  const match = str.match(/^\D+/)
  return match ? match[0] : ''
}

const colorClass = computed(() => {
  if (!props.showColor)
    return ''

  const amount = Number(props.amount)
  return amount > 0 ? 'text-[#24ee89]' : (amount < 0 ? 'red' : '')
})
const formatAmount = computed(() => {
  const amount = props.amount?.toString() ?? ''
  if (_currencyType.value && amount && currencyConfig[_currencyType.value] && !props.noFormat) {
    const match = extractNonNumericStart(amount)
    const _amount = amount.replace(match, '')
    return match + application.formatNumDecimal(_amount, currencyConfig[_currencyType.value].decimal)
  }
  else {
    return amount
  }
})
// 处理负数符号字体
function checkIsSmallThanZero(amount: string | number) {
  return amount.toString().includes('-')
}
</script>

<template>
  <div class="app-amount" :class="{ 'flex-row-reverse': reverse }">
    <span class="amount" :class="colorClass">
      <template v-if="showPrefix && isOfficial">{{ _prefix }}</template>
      <span v-if="checkIsSmallThanZero(formatAmount)" style="font-family: proxima-nova, sans-serif;">-</span>
      <span>{{ formatAmount.toString().replace('-', '') }}</span>
    </span>
    <AppCurrencyIcon v-if="_currencyType && showIcon" :show-name="showName" :currency-type="_currencyType" />
  </div>
</template>

<style>
:root {
  --tg-app-amount-width: auto;
  --tg-app-amount-max-width: 14ch;
  --tg-app-amount-font-weight: 700;
  --tg-app-amount-font-size: .875rem;
  --tg-app-amount-red-color: var(--color-function-red);
  --tg-app-amount-green-color: var(--color-function-green);
  --tg-amount-spacing: .375rem;
  --bc-amount-currency-size:1.5rem
  /* last history:peter */
}
</style>
<style lang='scss' scoped>
.app-amount {
  --tg-app-currency-icon-size: var(--bc-amount-currency-size);
  font-size: inherit;
  color: inherit;
  display: flex;
  align-items: center;

  &.flex-row-reverse {
    .amount {
      margin-left: var(--tg-amount-spacing);
    }
  }
}

.amount {
  width: var(--tg-app-amount-width);
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  margin-right: var(--tg-amount-spacing);
  max-width: var(--tg-app-amount-max-width);
  font-size: var(--tg-app-amount-font-size);
  font-weight: var(--tg-app-amount-font-weight);

}
</style>
